<template>
    <div class="emoji">
        <div class="emoji-item" v-for="(item, index) in 200" :key="index">
            <img :src="`./gif/${item}.gif`"  @click="selectEmoji(item)" />
        </div>
    </div> 
</template>

<script>
    export default {
        name: "Emoji",
        methods: {
            selectEmoji(index) {
                this.$emit("selectEmoji", index);
            }
        }
    }
</script>

<style lang="less" scoped>
    .emoji {
        display: flex;
        flex-wrap: wrap;
        padding: .625rem;
        height: 9.375rem;
        width: 95%;
        overflow: auto;
        box-sizing: border-box;
        justify-content: space-around;
        margin: auto;
        .emoji-item {
            // flex-grow: 1;
            width: 1.875rem;
            height: 1.875rem;
            margin: .3125rem;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>